import React,{useState,useEffect,useRef} from 'react'
import { useObserverHook } from '@/Utils/hook/index'
import {BulbOutlined,MessageOutlined} from '@ant-design/icons'
import CreatePortal from './createPortal'
import '@/assets/style/components.less'
import moment from 'moment'
export default function messageInfo(props:any) {
    // 设置提醒类型 number 有未读消息展示数字  circle 展示小红点
    const [remind,setRemind] = useState('')
    // msgList 接收传入的list 然后处理展示
    const [messageList,setMessageList]:any = useState([])
    const [scrollList,setScrollList]:any = useState([]) // 展示的list
    // 分页滚动相关
    const [howPage,setHowPage] = useState(0)
    const [page,setPage] = useState(1)
    const [pageSize,setPageSize] = useState(8)
    const [showList,setShowList] = useState(false) // 控制消息列表展示
    const [neverSee,setNeverSee] = useState(0)  // 有多少条未读消息
    const [showLoading,setShowLoading] = useState(true)  // 监控滚动
    const timer:any = useRef(null)
    useEffect(()=>{
        setRemind('number')
    },[])
    useEffect(()=>{
        let list = props.data
        let cleanList = []
        let isUnRead = 0
        for(let item in list){
            let time = moment(list[item].time).fromNow(true)
            let rule = /['天','年']/g
            let reg = new RegExp(rule)
            if(!reg.test(time)){
                list[item].time = time + '前'
            } else {
                list[item].time = moment( list[item].time).format('YYYY-MM-DD')
            }
            if(list[item].isRead){
                isUnRead += 1
                cleanList.unshift(list[item])
            } else {
                cleanList.push(list[item])
            }
        }
        setNeverSee(isUnRead)
        setMessageList([...cleanList])
    },[props.data])
    useEffect(()=>{
        if(messageList.length > 0){
            cleanListOfPage()
        }
    },[messageList])
    useObserverHook('#loading',(entries)=>{
        if(entries[0].isIntersecting == true){
            if(!timer.current){
                if(page + 1 > howPage){
                    setShowLoading(false)
                } else {
                    needUploadNextPage()
                }
            } else {
                clearTimeout(timer.current)
            }
            timer.current = setTimeout(()=>{
                
                timer.current = null
            },1000)
            
        }
    },null)
    function showMessageList(){
        setShowList((showList) =>{
            return !showList
        })
    }
    function cleanListOfPage(){
        let howpage = Math.ceil(messageList.length / pageSize)
        let arr = []
        for(let i=0;i<messageList.length;i++){
            if(i < pageSize){
                arr.push(messageList[i])
            }
        }
        setHowPage(howpage)
        setScrollList(arr)
        console.log(howpage,messageList.length)
    }
    function needUploadNextPage(){
        let nowPage = page // 当前页数
        let allPage = howPage  // 总页数
        let pagesize = pageSize // 每页数量
        let arr = [...scrollList] // 展示的数组
        let allarr = [...messageList] // 总数组
        let needPushList = allarr.filter((t:any,index:number) => index >= (nowPage * pagesize))
        let setupList = [...arr,...needPushList]
        let cleanList = []
        for(let item in setupList){
            if(setupList[item].isRead){
                cleanList.unshift(setupList[item])
            } else {
                cleanList.push(setupList[item])
            }
        }
        setPage(nowPage +1)
        setScrollList(cleanList)
    }
    function changeFlag(item:object,index:number){
        let arr = [...scrollList]
        for(let value in arr){
            if(Number(value) == index){
                arr[value].isRead = false
                let afterItem = arr[value]
                console.log( arr.splice(index,1))
                arr.push(afterItem)
            }
        }
        setScrollList(arr)
    }
    return (
        <div>
        <CreatePortal>
            <div className="message_info_box" title="消息">
            <MessageOutlined  onClick={showMessageList} style={{fontSize:'1.5rem'}}/>
                <div className='box_header' onClick={showMessageList}>
                    {remind=='number'?<span className="message_number" >{neverSee <= 99?neverSee:99}</span>:<span className="message_circle"></span>}
                </div>
                {showList && <div className='box_info'>
                    <div className='box_info_title'>
                        <strong>消息中心</strong> <strong>({neverSee}条未读)</strong>
                    </div>
                    <ul>
                    {
                        scrollList.map((el:any,index:number) =>{
                            
                            return (
                                <li key={index} onClick={()=>changeFlag(el,index)}>
                                    <img src={el.headerImg}></img>
                                    <div className='box_info_list'>
                                        <span>{el.title}{el.isRead?<div className='red_point'></div>:null}</span>
                                        
                                        <div>{el.time}</div>
                                        <p title="1234">{el.content}</p>
                                    </div>
                                    
                                </li>
                            )
                        })
                    }
                    
                    {showLoading?<div id="loading" className="under">Loading...</div>:<div className="under">已经到底了~</div>}
                   
                    </ul>
                </div>
                }
                
            </div>
           
        </CreatePortal>
    
        </div>
  )
}
